<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false">
    <el-card class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">批量处理</span>
      </div>

      <el-row>
        <el-col>
          <el-table ref="multipleTable" :data="detailForm.insuranceVoList" tooltip-effect="dark" style="width: 100%"
                    :header-cell-class-name="headerClass">

            <el-table-column align="center" label="车辆产权" show-overflow-tooltip min-width="160"
                             prop="propertyRightName"/>
            <el-table-column align="center" label="车辆归属" show-overflow-tooltip min-width="160" prop="ascription"/>
            <el-table-column align="center" label="车辆运营" show-overflow-tooltip min-width="120"
                             prop="operationsName"/>
            <el-table-column align="center" label="车辆大区" show-overflow-tooltip min-width="160">
              <template #default="{row}">
                <span v-if="row.region">{{ row.region }} </span>

              </template>
            </el-table-column>
            <el-table-column align="center" label="车牌号" prop="carNo" min-width="160"/>
            <el-table-column align="center" label="车架号" prop="vinNo" min-width="160"/>
            <el-table-column align="center" label="发动机号" prop="engineNo" min-width="160"/>
            <el-table-column align="center" label="车型" show-overflow-tooltip width="200">
              <template #default="{row}">
                {{ row.modelName ? '/' + row.modelName : '' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="座位数" prop="seatNum" min-width="100"/>
            <el-table-column align="center" label="保险类型" width="130">
              <template #default="{row}">
                <span v-show="row.insuranceChannels === 1">我司购买/非店保</span>
                <span v-show="row.insuranceChannels === 2">店保</span>
                <span v-show="row.insuranceChannels === 3">客户自购</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="合计费用" prop="totalAmount" min-width="100">
              <template #default="{row,$index}">
                {{ handleNumber(row, $index) }}
              </template>
            </el-table-column>

            <!--交强险-->
            <el-table-column label="交强险" align="center">
              <el-table-column align="center" label="租赁禀议保险公司" width="150" prop="rentInsuranceCompany"/>
              <el-table-column align="center" label="保险公司" width="180" prop="jqxCompany">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxCompanyId'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-select v-model="row.jqxCompanyId" @change="handleChange(row.jqxCompanyId,'jqx',$index)"
                               style="width: 100%" placeholder="交强险公司" v-if="isEdit">
                      <el-option v-for="item in optionsData" :key="item.supplierId" :label="item.supplierName"
                                 :value="item.supplierId">
                      </el-option>
                    </el-select>
                    <!--                    <el-input v-if="isEdit" v-model="row.jqxCompany" placeholder="请输入交强险公司" size="mini"/>-->
                    <span v-else>{{ row.jqxCompany }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="交强险起保日" width="160" prop="jqxExpectBeginTime">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxExpectBeginTime'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-date-picker v-model="row.jqxExpectBeginTime" type="date" placeholder="请选择交强险起保日"
                                    v-if="isEdit"
                                    @change="handleDate(row.jqxExpectBeginTime,$index,'jqxExpectEndTime')"
                                    value-format='yyyy-MM-dd'
                                    style="width: 100%;">
                    </el-date-picker>
                    <span v-else>{{ row.jqxExpectBeginTime }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="交强险到期日" width="160" prop="jqxExpectEndTime">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxExpectEndTime'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-date-picker v-model="row.jqxExpectEndTime" type="date" placeholder="请选择交强险到期日"
                                    v-if="isEdit"
                                    value-format='yyyy-MM-dd' style="width: 100%;">
                    </el-date-picker>
                    <span v-else>{{ row.jqxExpectEndTime }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="性质" width="160" prop="jqxInsuranceType">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxInsuranceType'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-select v-model="row.jqxInsuranceType" v-if="isEdit" style="width: 100%;"
                               @change="handleType($index,row.jqxInsuranceType)"
                               placeholder="请选择交强险性质">
                      <el-option label="运营" value="1">
                      </el-option>
                      <el-option label="非运营" value="2">
                      </el-option>
                    </el-select>
                    <span v-else>
                      {{ row.jqxInsuranceType === '1' ? '运营' : row.jqxInsuranceType === '2' ? '非运营' : '' }}
                    </span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="交强险保费" width="160" prop="jqxAmount">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxAmount'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-input v-if="isEdit" v-model="row.jqxAmount" placeholder="请输入交强险保费" v-thousand
                              @change="changeTable(row, $index, 'jqxAmount')" size="mini"/>
                    <span v-else>{{ format_thousand(row.jqxAmount) }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车船税费用" width="160" prop="carTax">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.carTax'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-input v-if="isEdit" v-thousand v-model="row.carTax" placeholder="请输入车船税费用"
                              @change="changeTable(row, $index, 'carTax')" size="mini"/>
                    <span v-else>{{ format_thousand(row.carTax) }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>

            <!--商业险-->
            <el-table-column label="商业险" align="center">
              <el-table-column align="center" label="租赁禀议保险公司" width="150" prop="rentInsuranceCompany"/>
              <el-table-column align="center" label="保险公司" width="180" prop="syxCompany">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.syxCompanyId'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-select v-model="row.syxCompanyId" @change="handleChange(row.syxCompanyId,'syx',$index)"
                               style="width: 100%" placeholder="交强险公司" v-if="isEdit">
                      <el-option v-for="item in optionsData" :key="item.supplierId" :label="item.supplierName"
                                 :value="item.supplierId">
                      </el-option>
                    </el-select>
                    <!--                    <el-input v-if="isEdit" v-model="row.syxCompany" placeholder="请输入交强险公司" size="mini"/>-->
                    <span v-else>{{ row.syxCompany }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商业险起保日" width="160" prop="syxExpectBeginTime">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.syxExpectBeginTime'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-date-picker v-model="row.syxExpectBeginTime" type="date" placeholder="请选择商业险起保日"
                                    v-if="isEdit"
                                    @change="handleDate(row.syxExpectBeginTime,$index,'syxExpectEndTime')"
                                    value-format='yyyy-MM-dd'
                                    style="width: 100%;">
                    </el-date-picker>
                    <span v-else>{{ row.syxExpectBeginTime }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商业险到期日" width="160" prop="syxExpectEndTime">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.syxExpectEndTime'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-date-picker v-model="row.syxExpectEndTime" type="date" placeholder="请选择商业险到期日"
                                    v-if="isEdit"
                                    value-format='yyyy-MM-dd' style="width: 100%;">
                    </el-date-picker>
                    <span v-else>{{ row.syxExpectEndTime }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="性质" width="150" prop="syxInsuranceType">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.syxInsuranceType'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-select v-model="row.syxInsuranceType" v-if="isEdit"
                               @change="handleType($index,row.syxInsuranceType,)"
                               style="width: 100%;" placeholder="请选择商业险性质">
                      <el-option label="运营" value="1">
                      </el-option>
                      <el-option label="非运营" value="2">
                      </el-option>
                    </el-select>
                    <span v-else>
                      {{ row.syxInsuranceType === '1' ? '运营' : row.syxInsuranceType === '2' ? '非运营' : '' }}
                    </span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商业险保费" width="150" prop="syxAmount">
                <template #default="{row,$index}">
                  <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.syxAmount'"
                                :rules="{required: isEdit,trigger: 'blur'}">
                    <el-input v-if="isEdit" v-thousand v-model="row.syxAmount" placeholder="请输入商业险保费"
                              @change="changeTable(row, $index, 'syxAmount')" size="mini"/>
                    <span v-else>{{ format_thousand(row.syxAmount) }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>

            <!--其他险种-->
            <el-table-column label="其他险种" align="center">
              <el-table-column align="center" label="其他险种备注" width="160" prop="otherInsuranceRemark">
                <template #default="{row,$index}">
                  <el-form-item class="formTable">
                    <el-input v-if="isEdit" v-model="row.otherInsuranceRemark" placeholder="请输入其他险种备注"
                              size="mini"/>
                    <span v-else>{{ row.otherInsuranceRemark }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="其他险种保费" width="160" prop="otherInsuranceSumAmount">
                <template #default="{row,$index}">
                  <el-form-item class="formTable">
                    <el-input v-if="isEdit" v-model="row.otherInsuranceSumAmount" placeholder="请输入其他险种保费"
                              v-thousand
                              @change="changeTable(row, $index, 'otherInsuranceSumAmount')" size="mini"/>
                    <span v-else>{{ format_thousand(row.otherInsuranceSumAmount) }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="商业险保单号" prop="syxPolicyCode" min-width="160">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.syxPolicyCode'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-input v-if="isEdit" v-model="row.syxPolicyCode" placeholder="请输入商业险保单号"
                            @change="handlePolicyCode(row.syxPolicyCode,$index,'syxPolicyCode','jqxPolicyCode')"
                            size="mini"/>
                  <span v-else>{{ row.syxPolicyCode }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="交强险保单号" prop="jqxPolicyCode" min-width="160">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'insuranceVoList.'+$index+'.jqxPolicyCode'"
                              :rules="{required: isEdit,trigger: 'blur'}">
                  <el-input v-if="isEdit" v-model="row.jqxPolicyCode" placeholder="请输入交强险保单号"
                            @change="handlePolicyCode(row.jqxPolicyCode,$index,'jqxPolicyCode','syxPolicyCode')"
                            size="mini"/>
                  <span v-else>{{ row.jqxPolicyCode }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商业险保单" prop="syxPolicyUrl" min-width="180">
              <template #default="{row}">
                <el-form-item class="formTable">
                  <el-popover placement="left" trigger="click">
                    <image-common v-model="row.syxPolicyUrl" :disabled="!isEdit" :limit="20" :up-type="2"/>
                    <el-button type="text" slot="reference">
                      <span v-if="row.syxBool" style="color: red;padding-left: 20px">请上传商业险保单</span>
                      <span v-else>上传</span>
                    </el-button>
                  </el-popover>

                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="交强险保单" prop="jqxPolicyUrl" min-width="180">
              <template #default="{row}">
                <el-form-item class="formTable">
                  <el-popover placement="left" trigger="click">
                    <image-common v-model="row.jqxPolicyUrl" :disabled="!isEdit" :limit="20" :up-type="2"/>
                    <el-button type="text" slot="reference">
                      <span v-if="row.jqxBool" style="color: red;padding-left: 20px">请上传交强险保单</span>
                      <span v-else>上传</span>
                    </el-button>
                  </el-popover>

                </el-form-item>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
import {getInsuranceSelectList} from "@/api/cwgd/insuranceSelect";
import TemplateFile from "@/views/system/templateFile/index.vue";

export default {
  name: "clientBatch",
  components: {TemplateFile},
  props: {
    value: {
      type: Object,
      default: {},
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleNumber() {
      return function (val, inedx) {
        let a =
            Number(val.jqxAmount) +
            Number(val.carTax) +
            Number(val.syxAmount) +
            Number(val.otherInsuranceSumAmount);
        this.$set(this.detailForm.insuranceVoList[inedx], "totalAmount", a);
        return a
      }
    },
  },
  watch: {
    "value.insuranceVoList": {
      handler(val) {
        if (val) {
          val.forEach((item) => {
            if (item.syxPolicyUrl) {
              item.syxBool = false;
            }
            if (item.jqxPolicyUrl) {
              item.jqxBool = false;
            }
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      headerStar: [
        "jqxCompany",
        "jqxExpectBeginTime",
        "jqxExpectEndTime",
        "jqxInsuranceType",
        "jqxAmount",
        "jqxAmount",
        "carTax",
        "syxCompany",
        "syxExpectBeginTime",
        "syxExpectEndTime",
        "syxInsuranceType",
        "syxAmount",
        "syxPolicyCode",
        "jqxPolicyCode",
        "syxPolicyUrl",
        "jqxPolicyUrl",
      ],
      indexTable: 0,
      optionsData: [],
    };
  },
  created() {
    this.handleOptionsList();
  },
  mounted() {
  },
  methods: {
    handleType(index, val) {
      this.value.insuranceVoList[index].jqxInsuranceType =
          this.value.insuranceVoList[index].syxInsuranceType = val
    },

    handlePolicyCode(val, i, key, key_) {
      if (val) {
        this.handleRepeat(i, key, val, key_);
      }
    },

    handleRepeat(index, key, val, key_) {
      let index_ = this.value.insuranceVoList.findIndex(
          (item, i) => (i !== index && val === item[key]) || val === item[key_]
      );
      if (index_ !== -1) {
        this.$set(this.value.insuranceVoList[index], [key], "");
      } else {
        this.$set(this.value.insuranceVoList[index], [key], val);
      }
    },

    handleDate(row, index, key) {
      let timeDate = this.addOneMonth(row, 12);
      this.$set(this.detailForm.insuranceVoList, index, {
        ...this.detailForm.insuranceVoList[index],
        [key]: timeDate,
      });
    },

    addOneMonth(dateString, month) {
      const date = new Date(dateString);
      date.setMonth(date.getMonth() + Number(month));
      date.setDate(date.getDate() - 1);
      return date.toISOString().split("T")[0]; // 返回YYYY-MM-DD格式的日期字符串
    },

    headerClass({row, column, rowIndex, columnIndex}) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerStar.includes(row[i].property) && i == columnIndex) {
          return "header-class";
        }
      }
    },

    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;

      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
    },


    handleEdit() {
    },

    handleEffect() {
      let arr = [
        this.handleUrl(this.value.insuranceVoList, "syxPolicyUrl", "syxBool"),
        this.handleUrl(this.value.insuranceVoList, "jqxPolicyUrl", "jqxBool"),
      ];
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            Promise.all(arr)
                .then(() => {
                  resolve();
                })
                .catch(() => {
                  reject();
                });
          } else {
            reject();
          }
        });
      });
    },

    handleUrl(list, key, str) {
      return new Promise((resolve, reject) => {
        let boole;
        list.forEach((item, index) => {
          if (item[key]) {
            this.$set(list[index], [str], false);
          } else {
            this.$set(list[index], [str], true);
          }
        });
        boole = list.every(item => item.syxBool === false && item.jqxBool === false)
        if (boole) {
          resolve();
        } else {
          reject();
        }
      });
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    handleOptionsList() {
      getInsuranceSelectList({businessTypeCode: "5"}).then((res) => {
        if (res.code === 200) {
          this.optionsData = res.data;
        }
      });
    },

    handleChange(val, type, index) {
      let obj = this.optionsData
          .map((a) => {
            if (val === a.supplierId) {
              return {
                name: a.supplierName,
                code: a.supplierCode,
                id: a.supplierId,
              };
            }
          })
          .filter((a) => a)[0];
      if (type === "jqx") {
        this.$set(this.value.insuranceVoList[index], "jqxCompany", obj.name);
        this.$set(
            this.value.insuranceVoList[index],
            "jqxCompanyCode",
            obj.code
        );
        this.$set(this.value.insuranceVoList[index], "jqxCompanyId", obj.id);

        this.$set(this.value.insuranceVoList[index], "syxCompany", obj.name);
        this.$set(
            this.value.insuranceVoList[index],
            "syxCompanyCode",
            obj.code
        );
        this.$set(this.value.insuranceVoList[index], "syxCompanyId", obj.id);
      }
      if (type === "syx") {
        this.$set(this.value.insuranceVoList[index], "syxCompany", obj.name);
        this.$set(
            this.value.insuranceVoList[index],
            "syxCompanyCode",
            obj.code
        );
        this.$set(this.value.insuranceVoList[index], "syxCompanyId", obj.id);

        this.$set(this.value.insuranceVoList[index], "jqxCompany", obj.name);
        this.$set(
            this.value.insuranceVoList[index],
            "jqxCompanyCode",
            obj.code
        );
        this.$set(this.value.insuranceVoList[index], "jqxCompanyId", obj.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}

::v-deep.component-upload-image {
  margin-left: 25px !important;
}
</style>


